<template>

  <base-content>
   <div class="main">
    <q-breadcrumbs class="text-grey" active-color="purple">
      <template v-slot:separator>
        <q-icon
          size="1.2em"
          name="arrow_forward"
          color="purple"
        />
      </template>

      <q-breadcrumbs-el label="首页" icon="home"  to="/"/>
      <q-breadcrumbs-el label="放射科" icon="widgets" />
      <q-breadcrumbs-el label="全部任务" icon="navigation" />
    </q-breadcrumbs>

    <!-- 表单提交组件 -->
    <div  class="q-pa-md form">
       <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
      v-model="form"
    >
    <div class="one" >
      <q-input outlined v-model="form.checkNum" label="检查号" name="shuliang" style="min-width:15rem" />

      <q-select  
                style="min-width:15rem"
                bg-color="white"  
                v-model="status" 
                :options="form.status"
                label="状态"  
                transition-show="flip-up"
                transition-hide="flip-down"
                emit-value
                map-options
                @input="change">
                <template v-slot:prepend>
                <q-icon name="event" />
                </template>
            </q-select>

      <q-select  
                style="min-width:15rem"
                bg-color="white"  
                v-model="isOpen" 
                :options="form.isOpen"
                label="是否可打"  
                transition-show="flip-up"
                transition-hide="flip-down"
                emit-value
                map-options
                @input="change">
                <template v-slot:prepend>
                <q-icon name="event" />
                </template>
            </q-select>

</div>

<div class="two" id="two">
   
  
    
     <q-input filled v-model="date" mask="date" 
      @click="timerShow" style="min-width:15rem">



<template v-slot:append>
         
        <q-icon name="event" class="cursor-pointer">

          <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
            <q-date v-model="date" mask="YYYY-MM-DD " color="purple" />
           
          </q-popup-proxy>
        </q-icon>
         

      </template>





        </q-input>
   <q-select  
                style="min-width:15rem"
                bg-color="white"  
                v-model="isOpen" 
                :options="form.isOpen"
                label="患者类型"  
                transition-show="flip-up"
                transition-hide="flip-down"
                emit-value
                map-options
                @input="change"
                id="222">
                <template v-slot:prepend>
                <q-icon name="event" />
                </template>
            </q-select>

    <q-select  
                style="min-width:15rem"
                bg-color="white"  
                v-model="isOpen" 
                :options="form.isOpen"
                label="报告或者胶片"  
                transition-show="flip-up"
                transition-hide="flip-down"
                emit-value
                map-options
                @input="change">
                <template v-slot:prepend>
                <q-icon name="event" />
                </template>
            </q-select>

    
  </div>














      <q-btn color="primary" label="提交" type="submit" />
      <q-btn color="purple" label="重置" type="reset" />
       </q-form>
    </div>
    <!-- 表单提交组件 -->



    <!-- 表格 -->
     <div class="q-pa-md">
    
    <tables :data="data" :columns="columns" v-if="data.length>0">
      



    </tables>

    <div>
     

    

    </div>

  </div>
   


    <div style="height:500px">
      我是
    </div>

    

   </div>
  </base-content>

</template>

<script>
// import countTo from 'vue-count-to'
import BaseContent from '../../components/BaseContent/BaseContent'
// import { thumbStyle } from 'components/BaseContent/ThumbStyle'
// import chartPie from '../../assets/js/echarts-1'
// import charts2Option from '../../assets/js/echarts-2'
// import { income, expense, total } from '../../assets/js/echarts-3'
// import chartZ from '../../assets/js/echarts-4'

import { getList } from '../../axios/AxiosConfig.js'

import tables from '../../components/table.vue'
import { yyyymmdd } from '../../utils/timer/yyyymmdd'
//  import PDFJS from 'pdfjs'

export default {
  name: 'imgs',
  components: {
    BaseContent,
    tables,
    // countTo
  },
 
  data () {
    return {
      src:'',
      data:[],
      selected:[],
            src:'',
            form:{
              checkNum:'',
              status:['1','2'],
              isOpen:['全部','可打印','不可打印'],
              time:'',
              type:['门诊','住院','急诊','体检','其他'],
              report:['全部','胶片','报告']
            },
            checkNum:'',
            status:'',
            isOpen:'',
            date:'',
            timer:false,
            updateProxy:true,
    columns:[
      {name:'name',field:'name',label:'名字'},
      {name:'time',field:'time',label:'时间'},
      {name:'show',field:'show',label:'节目'},
      {name:'pdf',field:'handle',label:'pdf'},

    ]


    }
  },
  mounted(){
     
     getList().then(res=>{
       console.log('res',res);
       this.data = res.data
       this.src = this.data[0].src
       this.data.forEach((i,v)=>{
        //  i.name = 'lanshi'+ v;
         (v%2 == 0)?i.flag = true: i.flag = false
         i.handle = '查看报告'
       })


this.src = res.data[0].pdf //获得bas464编码
            



     }).catch(err=>{
       console.log(err);
     })
    
  
  },
  methods: {
    dataURLtoBlob (dataurl) {
 var bstr = atob(dataurl);
 var n = bstr.length;
 var u8arr = new Uint8Array(n);
 while (n--) {
   u8arr[n] = bstr.charCodeAt(n);
 }
 return new Blob([u8arr], { type: 'application/pdf' });
},
  //  updateProxy(){},
  timerShow(){
    console.log(this.$refs.qDateProxy);
    this.$refs.qDateProxy.show()
    this.timer = true
    // this.$refs.qDateProxy.target = false
  },
    onSubmit(e){
      console.log('提交',e)
    },
    onReset(){
      console.log('重置');
      
    },
    change(){}
  },
  created(){
     this.date = yyyymmdd()
    

  }
}
</script>
<style lang="less" scoped>
 
.main{
    width: 100%;
    height: 100%;
    padding-top: 2rem;
    background-color: #EFEFEF;
     .form{
        .one{
          display: flex;
          justify-content: space-around;
        }
        .two{
          display: flex;
          justify-content: space-around;
        }
    } 
}

img{
    width: 500px;
    height: 500px;
}

.load{
    position: absolute;
    top: 50%;
    left: 50%;
}

</style>
